<template>
	<header class="header">
		<div class="logo">
			<router-link to="/homepage">主页</router-link>
			<el-button :icon="Search" @click="toSearchResult" style="opacity: 0.3;"/>
			<el-input v-model="keyword" style="width: 240px; opacity: 0.3;" placeholder="搜索..." />
		</div>
		<div class="user-profile">
			<router-link to="/shownotice">系统公告</router-link>
			<router-link to="/publish">发布</router-link>
			<router-link to="/login" v-if="user === ''"> 登录 </router-link>
			<router-link to="/register" v-if="user === ''"> 注册</router-link>

			<el-dropdown :hide-on-click="false">
				<span>
					<img
						:src="
							user.userAvatar ||
							`https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png`
						"
						alt=""
						style="width: 40px; height: 40px; border-radius: 50%"
					/>
					<el-icon class="el-icon--right"><arrow-down /></el-icon>
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item
							>
							<button @click="toAuthor" style="border: none;background-color: transparent; ">
								个人中心
							</button>
							</el-dropdown-item
						>
						<el-dropdown-item
							><router-link to="/person">
								个人资料
							</router-link></el-dropdown-item
						>
						<el-dropdown-item v-if="user.userRole==='ADMIN'"
							><router-link to="/user">
								用户管理
							</router-link></el-dropdown-item
						>
						<el-dropdown-item v-if="user.userRole==='ADMIN'"
							><router-link to="/notice">
								公告管理
							</router-link></el-dropdown-item
						>
						<el-dropdown-item @click="logout" v-if="user !== ''"
							>退出登录</el-dropdown-item
						>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</header>
</template>

<script setup>
import { useUserInfoStore } from "../stores/userInfo";
import { useRouter } from "vue-router";
const router = useRouter();

import { Search } from '@element-plus/icons-vue'

const userInfoStore = useUserInfoStore();
const user = userInfoStore.user;

import { ref } from 'vue'
import {reactive,onMounted} from "vue"
const keyword = ref('')

const datatable=reactive({
    form:{}
})


onMounted(()=>{
    datatable.form=user
})

const logout = () => {
	localStorage.removeItem("vue_admin_template_token");

	userInfoStore.user = "";
	router.push({ name: "login" });
};

const toSearchResult = () => {
	router.push({name:"searchResult",query:{keyword: keyword.value}});
}

const toAuthor = () => {
	const uid = datatable.form.id;
	router.push({ name: "PersonalSpace", query: { uid } });
}
</script>

<style scoped>
.header {
	width: 100%;
	height: 50px;
	background-color: #29292942;
	position: fixed; /* 使用固定定位 */
	top: 0; /* 将 Header 放置在页面顶部 */
	left: 0;
	z-index: 1000; /* 设置一个较高的 z-index 值 */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px; /* 添加内边距，增加内容与边框的距离 */
}

.logo a,
.user-profile a {
	color: rgba(255, 255, 255, 0.3);
	text-decoration: none;
	font-size: 18px;
	margin: 10px;
  padding-right: 15px;
  padding-top:5px;
}

.custom-button {
	display: inline-block;
	text-align: center;
	margin: 0px;
	line-height: 48px; /* Adjust line-height based on height */
	font-size: 18px; /* Adjust font size as needed */
	color: #29292942; /* Text color */
	border: none;
}

.example-showcase .el-dropdown + .el-dropdown {
	margin-left: 15px;
}
.example-showcase .el-dropdown-link {
	cursor: pointer;
	color: var(--el-color-primary);
	display: flex;
	align-items: center;
}

/* 样式可以根据需要自行调整 */
</style>
